<template>
  <div id="app">
    <router-view />
    <div class="audio" v-if="$store.state.musicInfo.showAplayer">
      <aplayer
        ref="aplayer"
        :lrcType="1"
        :autoplay="$store.state.musicInfo.isAutoplay"
        :music="{
          title: $store.state.musicInfo.music.title,
          artist: $store.state.musicInfo.music.artist,
          src: $store.state.musicInfo.music.src,
          pic: $store.state.musicInfo.music.pic,
          lrc: $store.state.musicInfo.music.lrc,
        }"
        :list="$store.state.musicInfo.musicList"
        :showLrc="$store.state.musicInfo.showLrc"
        :repeat="$store.state.musicInfo.repeat"
        :shuffle="$store.state.musicInfo.shuffle"
        :float="$store.state.musicInfo.float"
        :mini="$store.state.musicInfo.mini"
      />
    </div>
  </div>
</template>

<script>
import Aplayer from "vue-aplayer";
export default {
  components: {
    Aplayer,
  },
  created() {
    //播放器设置
    ipcRenderer.on("bofangQi", (event, status) => {
      if (status == 1) {
        this.$store.state.musicInfo.float = false;
        this.$store.state.musicInfo.mini = false;
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      } else if (status == 2) {
        this.$store.state.musicInfo.float = false;
        this.$store.state.musicInfo.mini = true;
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      } else {
        this.$store.state.musicInfo.float = true;
        this.$store.state.musicInfo.mini = false;
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      }
    });
    //快捷键设置
    require("mousetrap").bind(
      "ctrl+d",
      () => {
        this.$store.state.musicInfo.showLrc =
          !this.$store.state.musicInfo.showLrc;
        this.$store.state.musicInfo.isAutoplay = false;
        this.$store.state.musicInfo.showAplayer = false;
        this.$nextTick(() => {
          this.$store.state.musicInfo.isAutoplay = true;
          this.$store.state.musicInfo.showAplayer = true;
        });
      },
      "keyup"
    );
    require("mousetrap").bind(
      "ctrl+k",
      () => {
        this.$refs.aplayer.toggle();
      },
      "keyup"
    );
    //设置播放模式
    ipcRenderer.on("bofang", (event, status) => {
      if (status == 1) {
        this.$store.state.musicInfo.shuffle = false;
        this.$store.state.musicInfo.repeat = "repeat-all";
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      } else if (status == 2) {
        this.$store.state.musicInfo.shuffle = false;
        this.$store.state.musicInfo.repeat = "repeat-one";
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      } else if (status == 3) {
        this.$store.state.musicInfo.shuffle = true;
        this.$store.state.musicInfo.repeat = "no-repeat";
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      } else {
        this.$store.state.musicInfo.shuffle = false;
        this.$store.state.musicInfo.repeat = "no-repeat";
        this.$message({
          message: "设置成功",
          type: "success",
          showClose: true,
        });
      }
    });
    //跳转到设置页面
    ipcRenderer.on("openSetUp", () => {
      this.$router.push({
        path: "/setUp",
      });
    });
    //播放/暂停音频
    ipcRenderer.on("toggle", () => {
      this.$refs.aplayer.toggle();
    });
    //打开/关闭歌词
    ipcRenderer.on("Lyric", () => {
      this.$store.state.musicInfo.showLrc =
        !this.$store.state.musicInfo.showLrc;
      this.$store.state.musicInfo.isAutoplay = false;
      this.$store.state.musicInfo.showAplayer = false;
      this.$nextTick(() => {
        this.$store.state.musicInfo.isAutoplay = true;
        this.$store.state.musicInfo.showAplayer = true;
      });
      this.$message({
        message: "设置成功",
        type: "success",
        showClose: true,
      });
    });
    //设置开机自动运行
    const PowerOn = localStorage.getItem("PowerOn");
    if (PowerOn == "true") {
      this.$store.state.PowerOn = true;
    } else {
      this.$store.state.PowerOn = false;
    }
    //设置最小化或退出
    if (localStorage.getItem("chooseValue")) {
      this.$store.state.chooseClose = localStorage.getItem("chooseValue");
    } else {
      this.$store.state.chooseClose = "close";
    }
    //提取当前音乐和音乐列表
    if (localStorage.getItem("musicInfo")) {
      this.$store.state.musicInfo.music = JSON.parse(
        localStorage.getItem("musicInfo")
      );
      this.$store.state.musicInfo.showAplayer = true;
    }
    if (localStorage.getItem("musicList")) {
      this.$store.state.musicInfo.musicList = JSON.parse(
        localStorage.getItem("musicList")
      );
      this.$store.state.musicInfo.showAplayer = true;
    }
    //换肤功能
    document
      .getElementsByTagName("body")[0]
      .style.setProperty("--wangYiYunColor", localStorage.getItem("color"));
  },
  mounted() {
    console.log(this.$refs.aplayer);
    document.getElementById("loadingBackground").style.display = "none";
  },
};
</script>

<style lang="scss">
@import "./common/css/commonStyle";
/* 整个滚动条 */
/* 整个滚动条 */
::-webkit-scrollbar {
  /* 对应纵向滚动条的宽度 */
  width: 5px;
  /* 对应横向滚动条的宽度 */
  height: 5px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
  background-color: $wangYiYunColor;
  border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #dbeffd;
  border-radius: 32px;
}

.audio {
  position: fixed;
  z-index: 3;
  width: 100%;
  bottom: 0px;
}
</style>
